<template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :tree-data="treeData"
    tree-checkable
    allow-clear
    :show-checked-strategy="SHOW_ALL"
    placeholder="请选择菜单"
    tree-node-filter-prop="label"
    :fieldNames="{ label: 'menuName', value: 'id', children: 'children' }"
  />
</template>

<script setup>
import { menusTree } from "@api/system/menu.js";
import { TreeSelect } from "ant-design-vue";

const { select } = defineProps({
  select: {
    type: Array,
    default: [],
  },
});
const SHOW_ALL = TreeSelect.SHOW_ALL;

const value = ref([]);

// 使用 watch 监听 select 的变化
watch(
  select,
  (newSelect) => {
    value.value = newSelect;
  },
  { deep: true },
);

console.log(value.value);

let treeData = ref([]);
onMounted(() => {
  loadData();
});

const loadData = async () => {
  const response = await menusTree();
  if (response.code === 200) {
    treeData.value = response.data;
  }
};

const emit = defineEmits(["menuArr"]);

watch(value, (newValue) => {
  emit("menuArr", newValue);
});
</script>

<style scoped lang="scss"></style>
